<template>
  <div  v-title="'班次安排 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkArrangementMgt">
        <template v-if='beforeGetFocus'>
          <div class='searchDiv marginBottom-20'>
            <i class='el-icon-search searchBtn'></i>
            <el-input  placeholder="站点名称" class='searchInput' @focus='onFousEvent'></el-input>
            <mk-permission :perms="['Ticket:LineManagement:Schedule:create']">
              <el-button type="primary" size="" @click="addArrangement" class='floatRight btn-create'>添加安排</el-button>
            </mk-permission>
          </div>
        </template>
        <template v-else>
          <div class='onfousInput marginBottom-20'>
            <div class='onfocusInputContent'>
              <i class='el-icon-search searchBtn1'></i>
              <el-input placeholder="站点名称"  class='searchInput1' :maxlength='20'  v-model='searchCondition.search' @keyup.native.enter='searchByCondition' ref='searchInput1'></el-input>
              <i class='el-icon-close closeSearch' @click='closeSearch("searchForm")'></i>
              <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition("searchForm")'>条件重置</el-button>
              <el-button type='primary' class='btn-primary searchCustomer' @click='searchByCondition'>搜索</el-button>
              <div class='lineStyle'></div>
              <div class='searchByCondition'>
                <el-form :inline="true" :model="searchCondition" ref='searchForm'>
                  <el-form-item label="乘车车站" prop='startSiteId'>
                    <el-select placeholder="" v-model='searchCondition.startSiteId' @change='searchByCondition'>
                      <el-option label='全部' value=''></el-option>
                      <el-option v-for="item in siteSelect" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="终点站" prop='endSiteId'>
                    <el-select placeholder="" v-model='searchCondition.endSiteId' @change='searchByCondition'>
                      <el-option label='全部' value=''></el-option>
                      <el-option v-for="item in siteSelect" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </template>

        <div class="tabContainer primary_bg trHasCursor"   v-loading="loadingTab"
             element-loading-text="拼命加载中">
          <el-table
            @row-click="showDetail"
            :data="dataArr.elements"
            style="width: 100%">
            <el-table-column
              prop="startSiteName"
              label="乘车车站"
              show-overflow-tooltip
              width="">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="midwaySiteName"
              label="途经站"
              width="">
            </el-table-column>
            <el-table-column
              prop="endSiteName"
              show-overflow-tooltip
              label="终点站">
            </el-table-column>
            <el-table-column
              prop="date"
              show-overflow-tooltip
              label="发车时间">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="totalTicket"
              label="总票数（张）">
            </el-table-column>
            <el-table-column
              prop=""
              width="120"
              label="">
              <template slot-scope="scope">
                <!--<el-button type="text">临时调班</el-button>-->
                <!--<mk-permission :perms="['Ticket:LineManagement:Schedule:update']">-->
                  <!--<el-popover placement="top" title="" trigger="hover" popper-class='MkPopover_tip defined_tip'>-->
                    <!--<span>编辑</span>-->
                    <!--<i class="el-icon-edit operationIconStyle" @click.stop="editArrangement(scope.row.id)" slot="reference"  style="font-size:14px;"></i>-->
                  <!--</el-popover>-->
                <!--</mk-permission>-->
                <mk-permission :perms="['Ticket:LineManagement:Schedule:delete']">
                  <el-popover placement="top" title="" trigger="hover" popper-class='MkPopover_tip defined_tip'>
                    <span>删除</span>
                    <i class="el-icon-delete2 operationIconStyle" @click.stop="deleteArrangement(scope.row.id)" slot="reference"  style="font-size:14px;"></i>
                  </el-popover>
                </mk-permission>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-if='dataArr.elements.length>0'
            @current-change="handleCurrentChange"
            :current-page="dataArr.page"
            :page-size="dataArr.size"
            layout="total, prev, pager, next"
            :total="dataArr.totalAmount">
          </el-pagination>
        </div>
    </div>
    </el-scrollbar>
    <!--添加/编辑线路-->
    <mk-add-arrangement :showDialog='dialogVisible_add' :currentId="currentId"  v-on:closeDialog='closeDialog_add'></mk-add-arrangement>

</div>
</template>

<script>
import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
import MkAddArrangement from './MkAddArrangement.vue'
import MkPermission from "../../../components/MkPermission";
import routeService from '../../../services/route'
import { mapState } from 'vuex'
export default {
  name: 'MkArrangementMgt',
  components: {
    MkBreadcrumb,MkAddArrangement,MkPermission
  },
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
    fixedHeightSmall: state => state.global.fixedHeightSmall,
    siteSelect: state => state.route.siteList,
  }),
  methods: {
    deleteArrangement(id) {
      this.$confirm('此操作将删除该安排, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmBox_warning'
      }).then(() => {
        routeService.deleteArrangement({id:id},() => {
          this.$message.success('删除成功');
          if(this.dataArr.page != 1　&&　this.dataArr.totalAmount == (this.dataArr['page.pn'] - 1) * this.dataArr['page.size'] + 1) {
              this.searchCondition['page.pn'] -= 1;
          }
          this.loadData();
        })
      }).catch(()=>{

      });
    },
    editArrangement(id) {
        this.currentId = id;
        this.dialogVisible_add = true;
    },
    showDetail(row) {
     this.$router.push({path:'/arrangementDetail',query:{id:row.id}});
    },
    closeSearch(formName) {
     this.resetForm(formName);
      this.beforeGetFocus = true;
      this.loadData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchCondition.search = '';
      this.searchCondition['page.pn'] = 1;
    },
    resetCondition(formName) {
      this.resetForm(formName);
      this.loadData();
    },
    onFousEvent() {
      this.beforeGetFocus = false;
      this.$nextTick(function(){
        this.$refs.searchInput1.$el.children[0].focus();
      });
    },
    handleCurrentChange(val) {
      this.searchCondition['page.pn'] = val;
      this.loadData();
    },
    addArrangement() {
      this.currentId = '';
      this.dialogVisible_add = true;
    },
    searchByCondition() {
      this.searchCondition['page.pn'] = 1;
      this.loadData();
    },
    loadData() {
      this.loadingTab = true;
      routeService.loadArrangementList(this.searchCondition,(data)=>{
        data.data.totalAmount = parseInt(data.data.totalAmount);
        this.dataArr = data.data;
        this.loadingTab = false;
      });
    },

    closeDialog_add(type) {
      this.dialogVisible_add = false;
      if(type == 'yes') {
        this.loadData();
      }
    },
  },
  watch: {
  },
  mounted: function() {
    this.$store.dispatch('loadAllLines');
    this.$store.dispatch('loadSiteList',{fields:'id,name,number'});
    this.loadData();
  },
  data () {
    return {
      currentId: '',
      dialogVisible_add: false,
      loadingTab: false,
      beforeGetFocus: true,
      searchCondition: {
        'page.pn': 1,
        'page.size': 10,
        search: '',
        startSiteId: '',
        endSiteId: ''
      },
      title: '',
      breadcrumbData: {
        list: {
          first: {name:'线路管理',path: null, isClickAble: false},
          second: {name: '班次安排',path: null, isClickAble: false}
        },
        menuIconStyle : 'routeIconStyle'
      },
      dataArr: {
        page: '',
        size: '',
        totalAmount: '',
        totalPages: '',
        elements: []
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.MkArrangementMgt{
  .el-button{
    padding:0 10px;
  }
}
</style>
